<template>
  <div class="shoptwo">
    <header>
      <div class="more-left"><a><img src="../assets/img/m1.png" ></a></div>
      <div class="more-center">{{msg}}</div>
      <div class="more-right"><a></a></div>
    </header>
    <section class="shoptwo-main">
      <div class="imgbg">
        <div class="imgbg-left">
          <img src="../assets/img/m34.png">
        </div>
        <div class="imgbg-content">
          <p class="imgbgname">{{name}}</p>
          <p class="phonenum">{{phonenum}}</p>
        </div>
        <div class="imgbg-right">
          <img src="../assets/img/m40.png">
        </div>
      </div>
      <ul class="liss">
        <li>
          <img src="../assets/img/m35.png" class="imglis">
          <span>{{fontone}}</span>
          <img src="../assets/img/m39.png" class="imgarrow">
        </li>
        <li>
          <img src="../assets/img/m36.png" class="imglis">
          <span>{{fonttwo}}</span>
          <img src="../assets/img/m39.png" class="imgarrow">
        </li>
        <li>
          <img src="../assets/img/m37.png" class="imglis">
          <span>{{fontthreen}}</span>
          <img src="../assets/img/m39.png" class="imgarrow">
        </li>
        <li>
          <img src="../assets/img/m38.png" class="imglis">
          <span>{{fontfour}}</span>
          <img src="../assets/img/m39.png" class="imgarrow">
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '积分商城',
      name: '张女士',
      phonenum: 13852630215,
      fontone: '我的钱包',
      fonttwo: '推荐好友',
      fontthreen: '积分商城',
      fontfour: '更多设置'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
  @import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
  @import '.././assets/css/shoptwo.less';
  .shoptwo-main{
    .imgbg{
      .px2rem(margin-top,20);
      .height(230);
      background: url('../assets/img/m33.png');
      display: flex;
      .font-size(38);
      align-items: center;
      .imgbg-left{
        img{
          width: 6em;
        }
        .px2rem(padding-left,30);
      }
      .imgbg-content{
        flex: 1;
        .px2rem(padding-left,45);
        .imgbgname{
          color: #182120;
          .px2rem(padding-bottom,13);
        }
        .phonenum{
          color: #343d46;
          .px2rem(padding-top,13);
        }
      }
      .imgbg-right{
        img{
          width: 1.2em;
          .px2rem(padding-right,36);
        }
      }
    }
    .liss{
      .px2rem(margin-top,15);
      .px2rem(margin-right,38);
      .px2rem(margin-left,38);
      >li{
        .height(100);
        display: flex;
        align-items: cneter;
        .border-bottom(1,solid,#e3e3e3);
        .imglis{
          height: 2em;
          .px2rem(padding-top,22);
          .px2rem(padding-right,28);
        }
        >span{
          flex: 1;
          .font-size(38);
          .line-height(100);
          color: #1b1b1b;
        }
        .imgarrow{
          height: 2em;
          .px2rem(padding-top,22);
        }
      }
    }
  }
</style>
